<script setup>
import { useCountDown } from "@/hook/timer";
import TopButton from "@/components/Pengyq/TopButton.vue";
import { dataNitk } from "@/hook/dataNltk";
import { useUseStore } from "@/stores/user";
import { useRouter, useRoute } from "vue-router";
import {
  getOrderListAPI,
  delOrderAPI,
  failOrderAPI,
  changeShopPriceAPI,
} from "@/server/api/shopOrder";
import { onMounted, ref } from "vue";
import { showToast } from "vant";
import { useI18n } from "vue-i18n";
const { t } = useI18n();
const { start, formatTime } = useCountDown();
// 定义Nav导航栏数据
const NavList = ref([
  { title: "All orders" },
  { title: "Pending payments" },
  { title: "To be shipped" },
]);

const page = ref(1); // 定义切换条件
const useStore = useUseStore(); //注册pian
const priceShow = ref(false); //修改价格弹窗状态
const numberPrice = ref(); // 修改价格变量储存
const stateIndex = ref(-1); //tab栏切换状态
const router = useRouter(); //注册路由
const route = useRoute(); //注册路由
const loading = ref(false); //定义加载状态
const finished = ref(false); //定义停止状态
const chengId = ref(0); //定义改价的订单id

// 定义tab切换方法
const tabList = (index) => {
  allOrdersList.value = [];
  page.value = 1;
  console.log(index);
  stateIndex.value = index - 1;
  if (index == 2) {
    stateIndex.value = 2;
  }
  getOrderList(stateIndex.value, route.params.id, 10, page.value);
};
// 定义全部订单数据
const allOrdersList = ref([]);

// 获取订单接口方法
const getOrderList = async (Status, Id, Size, Page) => {
  const res = await getOrderListAPI(Status, Id, Size, Page);
  let data = dataNitk(res.data.data.list, useStore.ing);
  allOrdersList.value.push(...data);
  if (
    allOrdersList.value.length >= res.data.data.count ||
    res.data.data.list.length < limit
  ) {
    finished.value = true;
  }
  console.log(res);

  loading.value = false;
  console.log("list:", res.data.data.list);
};

// 删除订单接口方法
const delOrder = async (id) => {
  const res = await delOrderAPI(id);
  showToast(res.data.data);
  getOrderList(stateIndex.value, route.params.id, 10, page.value);
};

//删除方法
const deleteOder = (id) => {
  delOrder(id);
};

//定义修改价格接口
const changeShopPrice = async (id, price) => {
  const res = await changeShopPriceAPI(id, price);
  console.log(res);
};

// 修改订单方法
const confirm = () => {
  console.log("确认了");
  changeShopPrice(chengId.value, numberPrice.value);
  let inx = allOrdersList.value.findIndex((item) => {
    return chengId.value == item.orderId;
  });
  allOrdersList.value[inx].transactionAmount = numberPrice.value;
};

// 定义订单失效接口
const failOrder = (id) => {
  const res = failOrderAPI(id);
};

// 定义跳转函数
const toDetail = (id, price) => {
  router.push({
    path: `/Detail/${id}`,
    query: {
      price: price,
    },
  });
};

const onLoad = () => {
  finished.value = false;
  getOrderList(stateIndex.value, route.params.id, 10, page.value++);
};

onMounted(() => {
  // getOrderListByShopId(stateIndex.value, useStore.userId, 10, page.value++);
  start(1800);
  // failOrder("test1");
});
</script>
<template>
  <van-sticky>
    <top-button title="Item Center" />
    <div class="tab_list">
      <ul>
        <li v-for="(i, index) in NavList" :key="index" @click="tabList(index)"
          :class="{ active: stateIndex === index - 1 }">
          {{ i.title }}
        </li>
      </ul>
    </div>
  </van-sticky>
  <div class="itemCenter">
    <!-- 修改价格弹窗 -->
    <van-dialog v-model:show="priceShow" :title="$t('shopSeller.title')" show-cancel-button @confirm="confirm">
      <van-field v-model.number="numberPrice" type="number" :label="$t('shopSeller.price')" />
    </van-dialog>

    <ul class="list">
      <van-list v-model:loading="loading" :finished="finished" :finished-text="$t('noMore')" @load="onLoad">
        <li class="box_show" v-for="(item, index) in allOrdersList" :key="index"
          @click="toDetail(item.orderId, item.transactionAmount)">
          <van-swipe-cell>
            <div class="list_hd">
              <div class="login">
                <img :src="`${item.commodityImg}`" alt="" />
                {{ item.sellerName }}
              </div>

              <div class="text_right" v-if="item.orderStatus == 0">
                {{ formatTime }} {{ $t(" shopSeller.unpay") }}

              </div>
              <div class="text_right" v-if="item.orderStatus == 1">
                {{ formatTime }} {{ $t(" shopSeller.wait") }}

              </div>
              <div class="text_right" v-else-if="item.orderStatus == 2">
                {{ $t(" shopSeller.uncomment") }}
              </div>
              <div class="text_right" v-else-if="item.orderStatus == 4">
                {{ $t(" shopSeller.comment") }}
              </div>
            </div>
            <div class="list_ad">
              <div class="imgs">
                <img :src="item.sellerImg" alt="" />
              </div>
              <div class="title ellipsis-2">{{ item.details }}</div>
              <div class="introduce">
                <div class="price"><i>Pi</i>{{ item.transactionAmount }}</div>
                <div class="bottom_button">
                  <div class="btn" v-if="item.orderStatus == 2">{{ $t(" shopSeller.tip") }}</div>
                  <div class="btn" v-if="item.orderStatus == 1">{{ $t(" shopSeller.send") }}</div>
                  <div class="btn" v-else-if="item.orderStatus == 0" @click.stop="
                    priceShow = true;
                  numberPrice = item.transactionAmount;
                  chengId = item.orderId;
                  ">
                    改价
                  </div>
                </div>
              </div>
            </div>
            <template #right>
              <van-button square :text="$t('shopSeller.delete')" type="danger" class="delete-button"
                @click="deleteOder(item.orderId)" />
            </template>
          </van-swipe-cell>
        </li>
      </van-list>
    </ul>
  </div>
</template>


<style lang="scss" scoped>
.fixe {
  width: 100vw;
  height: 140rem;
  background-color: #fff;

  .top {
    position: fixed;
    width: 100vw;
    height: 140rem;
    background-color: #ffffff;
  }
}

.tab_list {
  padding-top: 60rem;

  ul {
    background-color: #f5f5f5;
    display: flex;
    justify-content: space-around;
    padding: 15rem 10rem;

    li {
      font-size: 15rem;
      position: relative;
      color: #ccc;
      font-weight: 600;

      &::after {
        position: absolute;
        bottom: -10rem;
        display: none;
        content: "";
        background-color: #642e8e;
        width: 20rem;
        height: 3rem;
        left: 50%;
        transform: translateX(-50%);
        border-radius: 10rem;
      }

      &:hover {
        color: #642e8e;

        &::after {
          display: block;
          color: #642e8e;
        }
      }

      &.active {
        color: #642e8e;

        &::after {
          display: block;
        }
      }
    }
  }
}

.itemCenter {
  font-size: 14rem;
  height: 100vh;
  background-color: #f5f5f5;
  box-sizing: border-box;
  width: 100%;

  .list {
    background-color: #f5f5f5;

    li {
      border: 10rem solid #fff;
      margin-top: 10rem;
      background-color: #fff;

      :deep(.delete-button) {
        height: 100%;
      }

      .list_hd {
        display: flex;
        justify-content: space-between;
        height: 20rem;
        padding: 10rem 0;

        .login {
          height: 24rem;
          color: #000000;
          font-weight: 500;
          font-size: 16rem;

          img {
            margin-right: 10rem;
            width: 24rem;
            height: 100%;
            object-fit: cover;
            vertical-align: middle;
            border-radius: 50%;
            overflow: hidden;
          }
        }

        .text_right {
          color: #642e8e;
          font-size: 16rem;
        }
      }

      .list_ad {
        display: flex;
        margin-top: 5rem;

        .imgs {
          width: 20%;
          overflow: hidden;
          border-radius: 10rem;

          img {
            width: 100%;
            height: 100%;
            object-fit: cover;
          }
        }

        .title {
          margin-left: 20rem;
          width: 170rem;
          height: 56rem;
          font-size: 14rem;
          line-height: 26rem;
        }

        .introduce {
          display: flex;
          flex-direction: column;
          padding-left: 20rem;

          .price {
            white-space: nowrap;
            margin-left: auto;
            margin-bottom: 20rem;
            font-size: 16rem;
            font-weight: 600;
            color: rgb(0, 0, 0);

            >i {
              color: #000000;
              font-size: 12rem;
            }
          }

          .bottom_button {
            margin-left: auto;
            display: flex;

            .btn {
              padding: 2rem 20rem;
              width: 48rem;
              margin-left: 10rem;
              font-size: 12rem;
              height: 30rem;
              line-height: 30rem;
              text-align: center;
              border-radius: 20rem;
              background-color: #642e8e;
              color: #fff;
            }
          }
        }
      }
    }
  }
}
</style>